<template>
  <div>
    <div>
      <myheader/>
      <van-form @submit="onSubmit">
        <van-field
            v-model="form.username"
            name="username"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
            v-model="form.password"
            type="password"
            name="password"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-field
            v-model="form.mobile"
            name="mobile"
            label="手机号"
            placeholder="手机号"
            :rules="[{ required: true, message: '请填写手机号' }]"
        />
        <drag-verify
            :width="320"
            :height="42"
            text="请将滑块拖动到右侧"
            successText="验证成功"
            ref="Verify"
        >
        </drag-verify>

        <div style="margin: 16px;width:150px;">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </div>

  </div>
</template>

<script>
import dragVerify from 'vue-drag-verify'
import myheader from "../myheader";


export default {
  name: "user",
  data() {
    return {
      form:{},
      width: 320,
      height: 42,

    };
  },
  methods: {
    onSubmit() {
      if(this.$refs.Verify.isPassing){
      this.$axios.post('users/reg',this.form).then(res=>{
        console.log(res)
        this.form = {}
        alert("添加成功")
      })
      }
      else {
        alert('请验证后提交')
      }
    },
  },
  components:{
    'myheader':myheader,
    dragVerify,
  }
}
</script>

<style scoped>

</style>